<template>
  <div>
    <!-- 订单信息 -->
      <div class="order-header">
        <el-button type="primary" size="small" @click="goToOrderDetails">返回订单</el-button>
      </div>

    <!-- 支付方式 -->
    <div class="payment-methods">
      <h3>支付方式</h3>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="payment-option" :class="{ active: selectedPayment === 'alipay' }" @click="selectPayment('alipay')">
            <img src="/ioc/zhifubao.png" alt="支付宝" class="payment-icon" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="payment-option" :class="{ active: selectedPayment === 'wechat' }" @click="selectPayment('wechat')">
            <img src="/ioc/weix.png" alt="微信支付" class="payment-icon" />
          </div>
        </el-col>
         <el-col :span="6">
          <div class="payment-option" :class="{ active: selectedPayment === 'wallet' }" @click="selectPayment('wallet')">
            <img src="/ioc/qianbao.png" alt="钱包支付" class="payment-icon" />余额:<span style="color: red;">{{ 300000 }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 应付金额和支付按钮 -->
    <div class="payment-action">
      <span>应付金额：￥{{ requestDto.productOrderTotalPrice }}</span>
      <el-button type="danger" @click="handlePay">立即支付</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref,defineProps } from 'vue'
import install from '@/utils/request'
import { ElMessage } from 'element-plus'
import router from '@/router/router'

const selectedPayment = ref('alipay')

const selectPayment = (method) => {
  selectedPayment.value = method
}
const props = defineProps({
  requestDto: {
    type: Object,
    required: true
  }
})

const handlePay = async() => {
  console.log('请求参数:', props.requestDto)
  const orderData = { ...props.requestDto, productOrderStatus: 1 } // 创建一个副本并设置订单状态为已支付
  const res = await install.post('/order/add', orderData)
  if (res.data.code === 200) {
    ElMessage.success('支付成功')
    router.replace('/');
    window.location.reload();
  } else {
    ElMessage.error(res.data.message || '支付失败')
  }
}

const emit = defineEmits(['goToOrderDetails'])

const goToOrderDetails = () => {
  emit('goToOrderDetails')
}
</script>

<style scoped>
.order-info {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.payment-methods h3 {
  margin-bottom: 10px;
}

.payment-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-option:hover {
  border-color: #409eff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.payment-option.active {
  border-color: #409eff;
  background-color: #ecf5ff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.payment-icon {
  width: 100px;
  height: 100px;
  margin-right: 8px;
}

.payment-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
